<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动</title>
		<style type="text/css">
			.box { width: 450px; height: 200px; }
			.box_left { float: left; width: 200px; background: aquamarine; }
			.box_right { width: 200px; float: right; background: burlywood; }
			.clear { clear: both; }
		</style>
	</head>
    <body>
		<div class="box">
			<div class="box_left">
				<img src="images/sunflower.jpg" style="width: 150px;height: 90px;" />
			</div>
			<div class="box_right">
				<p>111这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字…</p>
			</div>
			<div class="clear"></div> <!-- 清除float产生的浮动 -->
			<p>222这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字这里是浮动框外围的演示文字…</p>
		</div>
	</body>
</html>
